<!--  -->
<template>
  <div>
    <at-tabs style="margin-top:10px">
      <at-tab-pane label="我提交的报修" name="name1"></at-tab-pane>
      <div slot="extra">
        <router-link :to="{
           path:'/onlinerepair'
           }">
          <at-button size="small">在线报修</at-button>
        </router-link>
      </div>
    </at-tabs>
    <el-table ref="filterTable" :data="repairlist" style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        sortable
        width="180"
        column-key="date"
        :filters="timefilter"
        :filter-method="filterHandler"
      ></el-table-column>
      <el-table-column prop="name" label="需维修器材" width="180"></el-table-column>
      <el-table-column prop="des" label="描述" :formatter="formatter"></el-table-column>
      <el-table-column prop="tag" label="报修图片">
        <template slot-scope="scope">
          <img
            style="width: 250px; height: 150px"
            :src="scope.row.imgurl"
            @click="showbigpic(scope.row.imgurl)"
          />
        </template>
      </el-table-column>
    </el-table>

    <at-modal v-model="bigpicdialog" class="bigpicmodal" width="50%" height="60%">
      <img :src="showpic" class="pic" />
    </at-modal>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      bigpicdialog: false,
      showpic: "",
      timefilter: []
    };
  },

  components: {},

  computed: { ...mapState(["repairlist"]) },
  created() {
    this.getfiltertime();
  },
  methods: {
    ...mapMutations(["changeRepairlist"]),
    getfiltertime() {
      let list = [];
      this.repairlist.map((item, index) => {
        list.push({
          text: item.date,
          value: item.date
        });
      });
      this.timefilter = list;
    },
    showbigpic(url) {
      this.bigpicdialog = true;
      this.showpic = url;
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter("date");
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.des;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    }
  }
};
</script>
<style scoped lang="scss">
.repairimg {
  width: 50px;
  height: 50px;
}
.bigpicmodal {
  .pic {
    width: 50%;
  }
  /deep/ .at-modal {
    background-color: #ffffff00;
  }
  /deep/ .at-modal__footer {
    display: none;
  }
}
</style>
<style >
.at-tabs__nav-wrap {
  text-align: left;
}
</style>